<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let props = defineProps({
    pass:Number
})


let router = useRouter()
let items = ref([
   { 
    name:'My Credentials',

    path:'/MyCredentials'
   },
   { 
    name:'Apply Credentials',

    path:'/ApplyCredentials'
   },
   { 
    name:'Account Information',

    path:'/AccountInformation'
   }
])

let handleClick = (path) => {
    router.push(path)
}

</script>


<template>
    <div class="left-box">
        <div v-for="(item, index) in items" :key="index" @click="handleClick(item.path)" :class="{ active: props.pass==index }">
            <p>
                {{ item.name }}
            </p>
        </div>
    </div>
</template>

<style scoped>
.left-box {
    display: flex;
    flex-direction: column;
    border: 1px solid #EFEFEF;
    width: 271px;
    margin: 0 20px 0 0;
    div{
        cursor: pointer;
    }
    .active {
        p {
            color: #EC535B;
            font-weight: 700;
            font-size: 18px;
        }

        background-color: #FFECEC;
    }

    p {
        margin: 20px 0 20px 10px;
        color: #1F2930;
        font-size: 18px;
        font-weight: 400;
    }
}
</style>